<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MapV面</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.css">
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
<script type="text/javascript" src="http://mapv.baidu.com/build/mapv.min.js"></script>
<script type="text/javascript" src="../../dist/iclient9-leaflet.min.js"></script>
<script type="text/javascript">

    var map = L.map('map', {
        center: [22.65, 113.28],
        zoom: 8,
    });

    var mbAttr = 'Imagery © <a href="http://mapbox.com">Mapbox</a>',
        token = "pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",
        mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + token;

    L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}).addTo(map);
    loadData();

    //示例数据来源为百度MapV的加偏数据，iClient9未做纠偏处理
    function loadData() {
        $.get('../data/guang_dong.json', function (geojson) {
            var dataSet1 = mapv.geojson.getDataSet(geojson);
            var citys = {
                '深圳市': 20,
                '广州市': 40,
                '佛山市': 60,
                '江门市': 80,
                '中山市': 100,
            };
            var data1 = dataSet1.get({
                filter: function (item) {
                    if (!citys[item.name]) {
                        return false;
                    }

                    item.count = citys[item.name];
                    return true;
                }
            });
            dataSet1 = new mapv.DataSet(data1);
            var options = {
                gradient: {
                    0: 'yellow',
                    1: 'red'
                },
                globalAlpha: 0.8,
                draw: 'intensity'
            };

            var dataAttr = "数据来源<a target='_blank' href='http://mapv.baidu.com/examples/geojson-guangdong.html'>MapV</a>";
            L.supermap.mapVLayer(dataSet1, options, {attributionPrefix: dataAttr, attribution: ""}).addTo(map);

            var data2 = [];
            for (var key in citys) {
                var center = mapv.utilCityCenter.getCenterByCityName(key.replace('市', ''));
                data2.push(
                    {
                        geometry: {
                            type: 'Point',
                            coordinates: [center.lng, center.lat]
                        },
                        text: key
                    }
                );
            }
            var dataSet2 = new mapv.DataSet(data2);
            var textOptions = {
                draw: 'text',
                font: '14px Arial',
                fillStyle: 'blue',
                shadowColor: 'white',
                shadowBlue: 20,
                zIndex: 11,
                shadowBlur: 10
            };
            L.supermap.mapVLayer(dataSet2, textOptions).addTo(map);
            setTimeout(function () {
                 map.openPopup("示例数据来源为百度MapV的加偏数据，iClient9未做纠偏处理", map.getCenter());
            }, 1000)
        });
    }


</script>

</body>
</html>
